<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Checkout form</title>
</head>
<body>
<script type="text/javascript">
	function ajaxFunction()
	{
	var xmlHttp;
	var http_query = '';
	try
	  {
	  // Firefox, Opera 8.0+, Safari
	  xmlHttp=new XMLHttpRequest();
	  }
	catch (e)
	  {
	  // Internet Explorer
	  try
	    {
	    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	    }
	  catch (e)
	    {
	    try
	      {
	      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	      }
	    catch (e)
	      {
	      alert("Your browser does not support AJAX!");
	      return false;
	      }
	    }
	  }
		xmlHttp.onreadystatechange=function()
	    {
	    	if(xmlHttp.readyState == 4){
	    		/*alert(xmlHttp.responseText);*/
	    		return_info = xmlHttp.responseText.split("|");
	    		if(return_info[0] != '0'){
	    			alert(return_info[1]);
	    		}else{
	    			document.checkout.ssl_txn_id.value = return_info[1];
	    			document.checkout.ssl_approval_code = return_info[2];
	    			document.checkout.submit();
	    		}
	    	}
	    }
	  //validate all the fields
	  /*var firstname = document.checkout.firstname.value;
	  if(firstname == ''){
	  	alert('You must fill in the First Name field');
	  	document.checkout.firstname.setFocus();
	  	return false;
	  }
	  var lastname = document.checkout.lastname.value;
	  if(lastname == ''){
	  	alert('You must fill in the Last Name field');
	  	document.checkout.lastname.setFocus(); return false;
	  }
	  var addr1 = document.checkout.addr1.value;
	  if(addr1 == ''){
	  	alert('You must fill in the Address field');
	  	document.checkout.addr1.setFocus(); return false;
	  }
	  var addr2 = document.checkout.addr2.value;

	  var city = document.checkout.city.value;
	  if(city == ''){
	  	alert('You must fill in the City field');
	  	document.checkout.city.setFocus(); return false;
	  }
	  var state = document.checkout.state.value;
	  if(state == ''){
	  	alert('You must fill in the State field');
	  	document.checkout.state.setFocus(); return false;
	  }

	  var zip = document.checkout.zip.value;
	  if(zip == ''){
	  	alert('You must fill in the Post Code field');
	  	document.checkout.zip.setFocus(); return false;
	  }
	  var tel = document.checkout.tel.value;
	  if(tel == ''){
	  	alert('You must fill in the Telephone field');
	  	document.checkout.tel.setFocus(); return false;
	  }
	  var email = document.checkout.email.value;
	  if(email == ''){
	  	alert('You must fill in the Email field');
	  	document.checkout.email.setFocus(); return false;
	  }
	  var request = document.checkout.request.value;
		*/
	  document.checkout.amount.value = document.getElementById('net').innerHTML;
	  http_query += "amount=" + document.getElementById('net').innerHTML;
	  var cardtype = document.checkout.cardtype.value;
	  if(cardtype == ''){
	  	alert('You must fill in the Card Type field');
	  	document.checkout.cardtype.setFocus(); return false;
	  }else{
	  	http_query = http_query + "&cardtype=" + cardtype;
	  }
	  var cardnumber = document.checkout.cardnumber.value;
	  if(cardnumber == ''){
	  	alert('You must fill in the Card Number field');
	  	document.checkout.cardnumber.setFocus(); return false;
	  }else{
	  	http_query = http_query + "&cardnumber=" + cardnumber

	  }
	  var nameoncard = document.checkout.nameoncard.value;
	  if(nameoncard == ''){
	  	alert('You must fill in the Name on Card field');
	  	document.checkout.nameoncard.setFocus(); return false;
	  }else{
	  	http_query = http_query + "&nameoncard=" + nameoncard;

	  }
	  var expiry_month = document.checkout.expiry_month.value;
	  if(expiry_month == ''){
	  	alert('You must fill in the Expire Month field');
	  	document.checkout.expiry_month.focus(); return false;
	  }else{
	  	http_query = http_query + "&expiry_month=" + expiry_month;
	  }
	  var expiry_year = document.checkout.expiry_month.value;
	  if(expiry_year == ''){
	  	alert('You must fill in the Expire Year field');
	  	document.checkout.expiry_year.focus(); return false;
	  }else{
	  	http_query = http_query + "&expiry_year=" + expiry_year;
	  }
	  var cvv2 = document.checkout.cvv2.value;
	  if(cvv2 == ''){
	  	alert('You must fill in the Cvv2 field');
	  	document.checkout.cvv2.focus(); return false;
	  }else{
	  	http_query = http_query + "&cvv2=" + cvv2;
	  }
	  //send the request
	  xmlHttp.open("POST","pre-post.php", true);
	  xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	  xmlHttp.setRequestHeader("Content-length", http_query.length);
	  xmlHttp.setRequestHeader("Connection", "close");
	  xmlHttp.send(http_query);

   }
</script>
<form id="checkout" name="checkout" method="post" action="insert.php">
<input type="hidden" name="ssl_txn_id" id="ssl_txn_id" />
<input type="hidden" name="ssl_approval_code" id="ssl_approval_code" />
<table width="60%" align="center" cellspacing="2">
	<tr>
		<td align="center" colspan="3"><label><b>
		<h3>Checkout form</h3>
		</b></label></td>
	</tr>

	<tr>
		<td width="30%" align="right"><label for="firstname">First
		Name* </label></td>
		<td></td>
		<td><input id="firstname" name="firstname" style="width: 158px"/></td>
	</tr>
	<tr>
		<td width="30%" align="right"><label for="lastname">Last
		Name*</label></td>
		<td></td>
		<td><input id="lastname" name="lastname" style="width: 158px" /></td>
	</tr>
	<tr>
		<td width="30%" align="right">Address*</td>
		<td></td>
		<td><input id="addr1" name="addr1" style="width: 278px"></td>
	</tr>
	<tr>
		<td width="30%" align="right"><label for="addr2">Address
		Line 2</label></td>
		<td></td>
		<td><input id="addr2" name="addr2" style="width: 278px" /></td>
	</tr>
	<tr>
		<td width="30%" align="right"><label for="city">City </label>*</td>
		<td></td>
		<td><input id="city" name="city" style="width: 140px" /></td>
	</tr>
	<tr>
		<td width="30%" align="right"><label for="state">State </label>*</td>
		<td></td>
		<td><input id="state" name="state" style="width: 139px" /></td>
	</tr>
	<tr>
		<td width="30%" align="right"><label for="zip">Post Code</label>*</td>
		<td></td>
		<td><input id="zip" name="zip" style="width: 80px" /></td>
	</tr>
	<tr>
		<td width="30%" align="right">Telephone*</td>
		<td></td>
		<td><input id="tel" name="tel"></td>
	</tr>
	<tr>
		<td width="30%" align="right"><label for="email">Email* </label></td>
		<td></td>
		<td><input id="email" name="email" style="width: 218px"></td>
	</tr>
	<tr>
		<td width="30%" align="right">Request</td>
		<td></td>
		<td><input id="request" name="request"></td>
	</tr>
	<tr>
		<td colspan="3"><font color="#FF0000">Net Total: $<span
			id="net">110.00</span></font><input type="hidden" name="amount" id="amount" /></td>
	</tr>
	<tr>
		<td width="30%" align="right"><label for="cardtype">Credit
		Card</label></td>
		<td></td>
		<td><select id="cardtype" size="1" name="cardtype">
			<option value="Visa" selected>Visa</option>
			<option value="MasterCard">MasterCard</option>
		</select></td>
	</tr>
	<tr>
		<td width="30%" align="right"><label for="cardnumber">Card
		Number*</label></td>
		<td></td>
		<td><input id="cardnumber" name="cardnumber" /></td>
	</tr>
	<tr>
		<td width="30%" align="right"><label for="nameoncard">Name
		on Card</label>*</td>
		<td></td>
		<td><input id="nameoncard" name="nameoncard"></td>
	</tr>
	<tr>
		<td width="30%" align="right"><label>Expiry*</label></td>
		<td></td>
		<td><span class="month_label">MM</span> <span class="month_input"><input
			id="expiry_month" name="expiry_month" style="width: 78px" /></span> <span
			class="year_label">YY</span> <span class="year_input"><input
			id="expiry_year" name="expiry_year" style="width: 81px" /></span></td>
	</tr>
	<tr>
		<td width="30%" align="right"><label for="cvv2">CV Code* </label></td>
		<td></td>
		<td><input id="cvv2" name="cvv2" /></td>
	</tr>
	<tr>
		<td colspan="3" align="center"><input type="button" value="Send" onclick="ajaxFunction();" /></td>
	</tr>
</table>
</form>
</body>
</html>